<template>
  <view class="container">
    <!-- 头部背景图 -->
    <image src="/sub_shop/static/images/swiperbgc.png" mode="" class="swiperbgc"></image>
    <!-- 头部搜索组件 -->
    <headerCom style="position: absolute; top: 50rpx">
      <template #sort>
        <image src="/sub_shop/static/images/sort.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 100rpx" @click="showsort = !showsort"></image>
        <image v-if="false" src="/sub_shop/static/images/blackclose.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 100rpx"></image>
        <uni-icons v-if="false" type="clear" size="25" style="margin-left: 100rpx" color="#989898"></uni-icons>
      </template>
    </headerCom>
    <!-- 搜索区域 -->
    <view class="search" v-if="false">
      <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">历史搜索</view>
      <uni-icons type="trash-filled" size="20"></uni-icons>
    </view>
    <!-- 搜索记录 -->
    <view v-if="false">
      <view class="historyitem">手机</view>
      <view class="historyitem">笔记本</view>
      <view class="historyitem">手机</view>
    </view>
    <!-- 搜索到的物品 -->
    <!--商品模块 -->
    <view v-if="false" class="goods">
      <view class="goodsitem">
        <image src="../../static/image/download/code.png" mode="" class="goodsitemimage"></image>
        <view class="goodsinfo">
          <view class="goodsname singe-line">Apple 苹果 IPone14ProApple 苹果 IPone14Pr</view>
          <view>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 32rpx; color: red">4688.00</text>
          </view>
        </view>
      </view>
      <view class="goodsitem">
        <image src="../../static/image/download/code.png" mode="" class="goodsitemimage"></image>
        <view class="goodsinfo">
          <view class="goodsname singe-line">Apple 苹果 IPone14Pro</view>
          <view>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 32rpx; color: red">4688.00</text>
          </view>
        </view>
      </view>
      <view class="goodsitem">
        <image src="../../static/image/download/code.png" mode="" class="goodsitemimage"></image>
        <view class="goodsinfo">
          <view class="goodsname singe-line">Apple 苹果 IPone14Pro</view>
          <view>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 32rpx; color: red">4688.00</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 搜索不到的物品模块 -->
    <view style="margin: 164rpx 172rpx">
      <image src="/sub_shop/static/images/nodata.png" style="width: 406rpx; height: 310rpx; margin-bottom: 20rpx"></image>
      <view style="font-size: 26rpx; text-align: center">暂无数据，请换其他关键词</view>
    </view>
    <!-- 排序的弹框 -->
    <view class="sortbox" v-if="showsort">
      <view
        @click="choosesort = 0"
        :class="{ sortcommon: choosesort == 0 }"
        style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; margin-bottom: 44rpx; text-align: center; margin-top: 20rpx"
      >
        按时间从近到远
      </view>
      <view
        @click="choosesort = 1"
        :class="{ sortcommon: choosesort == 1 }"
        style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; margin-bottom: 44rpx; text-align: center"
      >
        按价格从低到高
      </view>
      <view
        @click="choosesort = 2"
        :class="{ sortcommon: choosesort == 2 }"
        style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #222222; text-align: center"
      >
        按销量从多到少
      </view>
    </view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
  </view>
</template>

<script>
import headerCom from '@/components/headersearch/headersearch.vue';
import footerCom from '@/components/shopfooter/shopfooter.vue';
export default {
  components: {
    headerCom,
    footerCom
  },
  data() {
    return {
      choosesort: 0,
      showsort: false
    };
  },
  methods: {
    change() {
      console.log(1111);
      this.choosesort = 1;
      console.log(this.choosesort);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .swiperbgc {
    width: 750rpx;
    height: 176rpx;
  }
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 34rpx 26rpx 22rpx 32rpx;
  }
  .historyitem {
    display: inline-block;
    width: 136rpx;
    height: 56rpx;
    margin-left: 44rpx;
    margin-bottom: 20rpx;
    text-align: center;
    line-height: 56rpx;
    font-style: 28rpx;
    color: #222222;
    background: #f2f2f2;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
  }
  .goods {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .goodsitem {
      width: 340rpx;
      height: 460rpx;
      margin-left: 26rpx;
      margin-bottom: 20rpx;
      .goodsitemimage {
        width: 340rpx;
        height: 340rpx;
      }
      .goodsinfo {
        width: 340rpx;
        height: 120rpx;
        .goodsname {
          font-size: 28rpx;
        }
        .singe-line {
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
        }
      }
    }
  }
  .sortbox {
    position: fixed;
    top: 130rpx;
    right: 100rpx;
    width: 230rpx;
    height: 240rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 6rpx 2rpx rgba(0, 0, 0, 0.09);
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    .sortcommon {
      color: #48b5a8 !important;
    }
  }
}
</style>
